import React, { Component } from 'react'
import { NavBar, Carousel, Flex, } from 'antd-mobile';
import SearchInput from "../searchinput/SearchInput";
import { withRouter } from "react-router-dom";
import myaxios from "../../utils/myaxios";
import "./index.scss"

class Index extends Component {
  state = {
    swiper_list: [],
    imgHeight: 170,
    catitems: [],//首页分类数据
    productData: [],//产品分类数据
    showSwiper: false,
  };
  // 轮播图点击事件
  handleSwiperClick = (goods_id) => {
    this.props.history.push("/goodDetail/" + goods_id);
  }

  // 导航图片点击事件
  handleCatClick = (params) => {
    this.props.history.push("/category");
  }
  // 图片列表点击事件
  handleImgClick = (params) => {

    this.props.history.push("/goodList?" + "query=服装");

  }

  componentDidMount() {
    // 轮播图数据请求
    myaxios.get("home/swiperdata").then(res => {
      this.setState({
        swiper_list: res,
        showSwiper: true
      })
    }).catch((err) => console.log(err));

    // 首页导航数据
    myaxios.get("home/catitems").then(res => {
      this.setState({
        catitems: res,
      })
    }).catch((err) => console.log(err));

    // 产品分类数据请求
    myaxios.get("home/floordata").then((res) => {
      this.setState({
        productData: res,
      })
    }).catch((err) => console.log(err))
  }
  render() {
    return (
      <div className="yg-index">
        {/* 首页导航开始 */}
        <div className="yg-index-header">
          <div className="yg-index-nav"><NavBar className="index-nav">优购商城</NavBar></div>
          {/* 首页导航结束 */}
          {/* 首页搜索开始 */}
          <div className="yg-index-search"> <SearchInput></SearchInput></div>
        </div>
        {/* 首页搜索框结束 */}
        {/* 首页轮播图开始 */}

        <div className="yg-index-swiper">
          {this.state.showSwiper && (
            <Carousel
              autoplay={true}
              infinite
            >
              {this.state.swiper_list.map(val => (
                <div
                  onClick={this.handleSwiperClick.bind(this, val.goods_id)}
                  key={val.goods_id}
                  style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                >
                  <img
                    src={val.image_src}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event('resize'));
                      this.setState({ imgHeight: 'auto' });
                    }}
                  />
                </div>
              ))}
            </Carousel>
          )}
        </div>
        {/* 首页轮播图结束 */}

        {/* 首页分类导航开始 */}
        <div className="yg-index-catitems">
          <div className="catitems-item">
            <Flex>
              {this.state.catitems.map((val) => {
                return <Flex.Item key={val.image_src} onClick={this.handleCatClick} >
                  <img src={val.image_src} alt="" />
                </Flex.Item>
              })}
            </Flex>
          </div>
        </div>
        {/* 首页分类导航结束 */}

        {/* 产品分类开始 */}
        <div className="yg-index-productData">
          {
            this.state.productData.map(val => {
              return <div key={val.floor_title.image_src} className="productData-item">
                {/* 标题开始 */}
                <div className="product-title">
                  <img src={val.floor_title.image_src} alt="" />
                </div>
                {/* 标题结束 */}
                {/* 图片列表开始 */}
                <div className="product-image-list" >
                  {
                    val.product_list.map(v => {
                      return <div className="image-list-item" key={v.image_src} onClick={this.handleImgClick}>
                        <img src={v.image_src} alt="" />
                      </div>
                    })
                  }
                </div>
                {/* 图片列表结束 */}
              </div>
            })
          }
        </div>
        {/* 产品分类结束 */}

      </div>
    )
  }
}

export default withRouter(Index)
